<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">拣货</div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-md" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <div class="row q-pt-sm q-col-gutter-sm">
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>拣货明细ID</span>
        <easy-input v-model="$d.form.pickLineId" :error="v$.pickLineId.$error" :error-message="e$(v$.pickLineId.$errors)"
          @focus="fx.ui.select" @keyup.enter="checkQrCode" ref="pickLineId"/>
      </div>
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>批号或外部批号</span> <span v-if="$d.mol" style="color: #C10015">(<span v-if="$d.isMultilotPick">当前为跨批次拣货，</span>该批号完成拣货后，实物库存剩余</span><span v-if="$d.mol" style="color: #C10015; font-weight: bold">{{$d.mol}}</span><span v-if="$d.mol" style="color: #C10015">)</span>
        <easy-input v-model="$d.form.lotOrVLot" :error="v$.lotOrVLot.$error" :error-message="e$(v$.lotOrVLot.$errors)"
          @focus="fx.ui.select" @keyup.enter="focusHelper.onEntered(2)" :ref="el=>focusHelper.regRef(el, 2)" />
      </div>
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>栈板号(箱号)</span>
        <easy-input v-model="$d.form.lpn" :error="v$.lpn.$error" :error-message="e$(v$.lpn.$errors)" @focus="fx.ui.select"
          :ref="el=>focusHelper.regRef(el, 3)" @keyup.enter="getRemaingMol"/>
      </div>
      <div class="col-12" v-if="$d.isNeedShowLoc">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>储位</span>
        <easy-input v-model="$d.form.loc" :error="v$.loc.$error" :error-message="e$(v$.loc.$errors)" @focus="fx.ui.select"
          :ref="el=>focusHelper.regRef(el, 4)" @keyup.enter="focusHelper.onEntered(4)"/>
      </div>
      <div class="col-12">
        <q-btn class="full-width" color="primary" label="确定拣货" @click="doPickByPda" :loading="submittingState" :disable="$d.mol" />
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'PickStd'
}
</script>

<script lang="ts" setup>
import {computed, nextTick, reactive, ref} from 'vue'
import useVuelidate from '@vuelidate/core'
import {playErrorSound, playSuccessSound} from '@njt/wms/helper/audio'
import {QInput} from 'quasar'
import {useFocusNextHelper} from '@njt/foundation/hooks/focusHelper'

let serverErrorMessage = ref('')
let submittingState = ref(false)

const $d = reactive({
  form: {
    // 拣货明细ID
    pickLineId: '' as string | null,
    // 栈板号
    lpn: null,
    // 批号或外部批号
    lotOrVLot: null,
    // 储位编号
    loc: null
  },
  mol: '',
  isNeedShowLoc: false,
  isMultilotPick: false
})

const validators = $f.validators
const rules = {
  pickLineId: {
    required: validators.required,
    int32: validators.int32
  },
  lpn: {
    required: validators.required
  },
  lotOrVLot: {
    required: validators.required
  },
  loc: {
    required: validators.requiredIf(computed(() => $d.isNeedShowLoc))
  }
}
const v$ = useVuelidate(rules, computed(() => $d.form), {$autoDirty: true})


const getRemaingMol = () => {
  focusHelper.onEntered(3)
  serverErrorMessage.value = ''
  void v$.value.$validate()
    .then((valRes) => {
      if (valRes) {
        $f.axios.get('/wms/work/order/get-remaing-mol-for-pda-pick-operation', {params: $d.form})
          .then((resp) => {
            $d.mol = String(resp.data.remaingMolForPdaPick)
            $d.isNeedShowLoc = resp.data.isNeedShowLoc
            $d.isMultilotPick = resp.data.isMultilotPick
          })
          .catch((err) => {
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
      }
    })
}

const doPickByPda = function () {
  serverErrorMessage.value = ''
  void v$.value.$validate()
    .then((valRes) => {
      if (valRes) {
        submittingState.value = true
        $f.axios
          .post('/wms/work/order/pick-by-pda',$d.form)
          .then(() => {
            $d.form.pickLineId = null
            $d.form.lotOrVLot = null
            $d.form.lpn = null
            $d.form.loc = null
            v$.value.$reset()
            $f.ui.showNotifySucceeded('拣货成功')
            $d.mol = ''
            $d.isNeedShowLoc = false
            $d.isMultilotPick = false
            playSuccessSound()
          })
          .catch((err) => {
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            submittingState.value = false
            void nextTick(() => {
              pickLineId.value && pickLineId.value.focus()
            })
          })
      } else {
        playErrorSound()
      }
    })
}

const checkQrCode = function () {
  $d.form.pickLineId = $f.misc.tryExtractCompactStringWithIndex(String($d.form.pickLineId), 0)
  focusHelper.onEntered(1)
}
const pickLineId = ref<QInput | null>(null)

const focusHelper = useFocusNextHelper()
focusHelper.regRef(pickLineId, 1)
const e$ = $f.getFieldErrStr
const fx = $f

</script>

<style scoped>

</style>
